import Editor from 'for-editor';
import { useEffect, useState } from 'react';
import {  EditorModelState,  IRouteComponentProps,  useDispatch,  useSelector,} from 'umi';
import styles from './detail.less';
import { Button, Popconfirm } from 'antd';
const PageId: React.FC<IRouteComponentProps<{ id: string }>> = (props) => {
  let id = props.match.params.id;
  const { editorId } = useSelector( (state: { editor: EditorModelState }) => state.editor,);
   
  
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'editor/getEditorId',
      payload: id,
    });
  }, [id]);
  const [value, setValue] = useState(editorId.html);
  return (
    <div>
      <header className={styles.editor_id_header}>
        <div className={styles.editor_id_ghost}>
          <div className={styles.editor_id_content}>
            <div>
              <Popconfirm  title="确认关闭？如果有内容变更，请先保存"  onConfirm={() => {    props.history.push('/page');  }}  okText="确认" cancelText="取消">
                <Button  htmlType="submit"  className={styles.editor_button_close}>
                  <span>
                    <svg  viewBox="64 64 896 896"  focusable="false"  data-icon="close"  width="1em"  height="1em"  fill="currentColor"  aria-hidden="true">
                      <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
                    </svg>
                  </span>
                </Button>
              </Popconfirm>
              <span className={styles.editor_input_title}>
                <input  type="text"  placeholder="请输入页面名称"  value={editorId.name}  onChange={() => {}}/>
              </span>
            </div>
            <span>
              <Button htmlType="submit" type="primary">
                <span>发布</span>
              </Button>
              <Button htmlType="submit" type="text">
                <span>
                  <svg  viewBox="64 64 896 896"  focusable="false"  data-icon="ellipsis"  width="1em"  height="1em"  fill="currentColor"  aria-hidden="true">
                    <path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path>
                  </svg>
                </span>
              </Button>
            </span>
          </div>
        </div>
      </header>
      <main>
        <Editor value={editorId.content} onChange={(value) => setValue(value)} />
      </main>
    </div>
  );
};
export default PageId;
